<script setup lang="ts">
import { getCodeApi, loginByMobileApi } from "@/apis/user"
import { useUserStore } from "@/stores/user"
import { ref } from "vue"

// 定义组件选项
defineOptions({
  options: {
    styleIsolation: "shared", // 设置样式隔离为共享
  },
})

// 控制倒计时显示状态
const isShowCountDown = ref(false)

// 获取手机验证码的异步函数
const getMobileCode = async () => {
  try {
    // 验证手机号字段
    await form.value?.validateField?.("mobile")
    // await form.value?.validateField?.(["mobile"]); // 可以验证多个字段

    // 调用获取验证码的 API
    const res = await getCodeApi({
      mobile: formData.value.mobile,
      type: "login",
    })

    // 发送验证码成功的提示信息
    uni.showToast({ title: "发送验证码成功", icon: "none" })

    // 模拟填写验证码
    formData.value.code = res.code

    // 显示倒计时
    isShowCountDown.value = true
  } catch (error) {
    console.log(error) // 打印错误信息
  }
}

// 表单数据
const formData = ref({
  mobile: "13230000069", // 手机号
  code: "", // 验证码
})

// 表单实例
const form = ref<UniHelper.UniFormsInstance>()

// 表单验证规则
const rules: UniHelper.UniFormsRules = {
  mobile: {
    rules: [
      { required: true, errorMessage: "请输入手机号" }, // 必填项
      { pattern: "^1[3-9][0-9]{9}$", errorMessage: "请输入正确的手机号" }, // 手机号正则验证
    ],
  },
  code: {
    rules: [
      { required: true, errorMessage: "请输入验证码" }, // 必填项
      { pattern: "^\\d{6}$", errorMessage: "请输入6位数字验证码" }, // 验证码正则验证
    ],
  },
}

// 提交表单
const onSubmit = async () => {
  try {
    // 验证整个表单
    await form.value?.validate?.()

    // 检查是否同意用户协议和隐私协议
    if (!isAgree.value) {
      return uni.showToast({ title: "请勾选用户协议" })
    }

    // 调用登录 API
    const res = await loginByMobileApi(formData.value)

    // 登录成功后，保存用户信息到本地存储中
    const userStore = useUserStore()
    userStore.setToken(res.token)
    userStore.setUserId(res.id)

    // 登录成功提示
    uni.showToast({ title: "登录成功" })

    // 跳转首页
    uni.switchTab({ url: "/pages/index/index" })
  } catch (error) {
    console.log(error) // 打印错误信息
  }
}

// 用户协议同意状态
const isAgree = ref(false)
</script>
<template>
  <uni-forms class="login-form" ref="form" :rules="rules" v-model="formData">
    <uni-forms-item name="mobile">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入手机号"
        placeholder-style="color: #C3C3C5"
        v-model="formData.mobile"
      />
    </uni-forms-item>
    <uni-forms-item name="code">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入验证码"
        placeholder-style="color: #C3C3C5"
        v-model="formData.code"
      />
      <text
        class="text-button"
        v-if="!isShowCountDown"
        @click="getMobileCode()"
      >
        获取验证码
      </text>
      <view class="text-button" v-else>
        <uni-countdown
          :show-day="false"
          :show-hour="false"
          :show-minute="false"
          :second="59"
          @timeup="isShowCountDown = false"
        />
        秒后重新发送
      </view>
    </uni-forms-item>

    <view class="agreement">
      <radio :checked="isAgree" @click="isAgree = !isAgree" color="#16C2A3" />
      我已同意
      <text class="link">用户协议</text>
      及
      <text class="link">隐私协议</text>
    </view>

    <button class="uni-button" @click="onSubmit()">登 录</button>
  </uni-forms>
</template>
<style lang="scss">
@import "./styles.scss";
</style>
